<!DOCTYPE html>
<html>
    <head>
        <title>Slides of elements</title>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <script type="text/javascript" src="jquery-1.9.1.js"></script>
        <script type="text/javascript">
            $(document).ready(function() {
                var speed = 1220;
                $("#HideButon").bind('click', function() {
                    $("#firstDiv").hide(speed, function() {
                        showStatus(this);
                        $("#HideButon").attr("disabled", "disabled");
                        $("#showButton").removeAttr("disabled");
                    })
                })
                $("#showButton").bind('click', function() {
                    $("#firstDiv").show(speed, function() {
                        showStatus(this);
                        $("#showButton").attr("disabled", "disabled");
                        $("#HideButon").removeAttr("disabled");
                    })
                })
                $("#toggleButon").bind('click', function() {
                    $("#secondDiv").toggle(speed * 2, "linear", function(){
                        showStatus(this);
                    });
                })

                function showStatus(element) {
                    var mssg = "Status of last modified div: " + $(element).is(":visible")
                    $("#state").html(mssg);
                }
            })
        </script>
    </head>
    <body>
        <h4>
            <a href="index.html">Index</a>
        </h4>
        <input id="showButton" type="button" value="Show left div" />
        <input id="HideButon" type="button" value="Hide left div" />
        <input id="toggleButon" type="button" value="Toggle right div" />

        <div id="state" style="color: steelblue; position: absolute; left: 370px; top: 10px"></div>
        <div id="firstDiv" style="position: absolute; left: 100px; top: 140px ;
             width: 399px; padding: 20px;background-color: slateblue;
             border-width: 1px; border-color: black; border-style: solid" >

            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas enim enim, condimentum vel tristique id, feugiat vitae ipsum. Praesent ultrices fermentum quam, sit amet pellentesque leo semper ut. Pellentesque ipsum orci, ornare quis tempus sit amet, scelerisque in mi. Integer pulvinar semper pharetra. Vivamus sodales tristique felis, sit amet tristique erat tempor et. Vivamus dictum hendrerit placerat. Ut a sollicitudin elit.

            Sed ut purus ligula, et ultricies elit. Aliquam in mauris neque, et adipiscing quam. Phasellus porta sem sed lacus faucibus porttitor non et nisi. Duis lacinia vestibulum lacus, at tristique risus egestas sed. Aliquam euismod commodo ornare. Duis laoreet sagittis urna, sed convallis neque commodo ac. Duis tincidunt nibh eros. Integer lobortis vulputate ligula vel porttitor.

        </div>
        <div id="secondDiv" style="position: absolute;
             left: 580px; top: 140px ; width: 399px; padding: 20px;
             background-color: violet; border-width: 1px;
             border-color: black; border-style: solid" >

            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas enim enim, condimentum vel tristique id, feugiat vitae ipsum. Praesent ultrices fermentum quam, sit amet pellentesque leo semper ut. Pellentesque ipsum orci, ornare quis tempus sit amet, scelerisque in mi. Integer pulvinar semper pharetra. Vivamus sodales tristique felis, sit amet tristique erat tempor et. Vivamus dictum hendrerit placerat. Ut a sollicitudin elit.

            Sed ut purus ligula, et ultricies elit. Aliquam in mauris neque, et adipiscing quam. Phasellus porta sem sed lacus faucibus porttitor non et nisi. Duis lacinia vestibulum lacus, at tristique risus egestas sed. Aliquam euismod commodo ornare. Duis laoreet sagittis urna, sed convallis neque commodo ac. Duis tincidunt nibh eros. Integer lobortis vulputate ligula vel porttitor.

        </div>
    </body>
</html>
